<template>
  <el-form ref="genInfoForm"
           :model="info"
           :rules="rules"
           label-width="150px">
    <el-row>
      <el-col :span="12">
        <el-form-item prop="tplCategory">
          <span slot="label">生成模板</span>
          <el-select v-model="info.tplCategory"
                     @change="tplSelectChange">
            <el-option label="单表（增删改查）"
                       value="crud" />
            <el-option label="树表（增删改查）"
                       value="tree" />
            <el-option label="主子表（太垃圾.别用）"
                       disabled
                       value="sub" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="tplWebType">
          <span slot="label">前端类型</span>
          <el-select v-model="info.tplWebType">
            <el-option label="Vue2 Element UI 模版"
                       value="element-ui" />
            <el-option label="Vue3 Element Plus 模版"
                       disabled
                       value="element-plus" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="packageName">
          <span slot="label">
            生成包路径
            <el-tooltip content="例如 com.galgram.project，末尾的project就是模块名"
                        placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.packageName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="moduleName">
          <span slot="label">
            生成模块名
            <el-tooltip content="例如 system模块 或者 project模块"
                        placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.moduleName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="businessName">
          <span slot="label">
            生成业务名
            <el-tooltip content="可理解为功能英文名(控制请求路径与前端文件名)，例如 user、student"
                        placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.businessName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="functionName">
          <span slot="label">
            生成功能名
            <el-tooltip content="可理解为功能中文名(控制页面菜单名)，例如 用户、学生"
                        placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.functionName" />
        </el-form-item>
      </el-col>

      <!-- <el-col :span="12">
        <el-form-item prop="genType">
          <span slot="label">
            生成代码方式
            <el-tooltip content="哈哈"
                        placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-radio v-model="info.genType"
                    disabled
                    label="0">zip压缩包</el-radio>
          <el-radio v-model="info.genType"
                    label="1">自定义路径</el-radio>
        </el-form-item>
      </el-col> -->

      <el-col :span="12">
        <el-form-item prop="parentMenuId">
          <span slot="label">
            上级菜单
            <el-tooltip content="分配到指定菜单下，例如 系统管理"
                        placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <treeselect :append-to-body="true"
                      v-model="info.parentMenuId"
                      :options="menus"
                      :normalizer="normalizer"
                      :show-count="true"
                      placeholder="请选择系统菜单" />
        </el-form-item>
      </el-col>

      <!-- <el-col :span="24"
              v-if="info.genType == '1'">
        <el-form-item prop="genPath">
          <span slot="label">
            自定义路径
            <el-tooltip content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下"
                        placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.genPath">
            <el-dropdown slot="append">
              <el-button type="primary">
                最近路径快速选择
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="info.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-input>
        </el-form-item>
      </el-col> -->
    </el-row>

    <el-row v-show="info.tplCategory == 'tree'">
      <h4 class="form-header">其他信息</h4>
      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            树编码字段
            <el-tooltip content="树显示的编码字段名， 如：dept_id"
                        placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select v-model="info.treeCode"
                     placeholder="请选择">
            <el-option v-for="(column, index) in info.columns"
                       :key="index"
                       :label="column.columnName + '：' + column.columnComment"
                       :value="column.columnName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            树父编码字段
            <el-tooltip content="树显示的父编码字段名， 如：parent_Id"
                        placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.treeParentCode"
                    readonly="" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            树名称字段
            <el-tooltip content="树节点的显示名称字段名， 如：dept_name"
                        placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select v-model="info.treeName"
                     placeholder="请选择">
            <el-option v-for="(column, index) in info.columns"
                       :key="index"
                       :label="column.columnName + '：' + column.columnComment"
                       :value="column.columnName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-show="info.tplCategory == 'sub'">
      <h4 class="form-header">关联信息</h4>
      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            关联子表的表名
            <el-tooltip content="关联子表的表名， 如：sys_user"
                        placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select v-model="info.subTableName"
                     placeholder="请选择"
                     @change="subSelectChange">
            <el-option v-for="(table, index) in tables"
                       :key="index"
                       :label="table.tableName + '：' + table.tableComment"
                       :value="table.tableName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            子表关联的外键名
            <el-tooltip content="子表关联的外键名， 如：user_id"
                        placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select v-model="info.subTableFkName"
                     placeholder="请选择">
            <el-option v-for="(column, index) in subColumns"
                       :key="index"
                       :label="column.columnName + '：' + column.columnComment"
                       :value="column.columnName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"

export default {
  components: { Treeselect },
  props: {
    info: {
      type: Object,
      default: null
    },
    tables: {
      type: Array,
      default: null
    },
    menus: {
      type: Array,
      default: []
    },
  },
  data () {
    return {
      subColumns: [],
      rules: {
        tplCategory: [
          { required: true, message: "请选择生成模板", trigger: "blur" }
        ],
        packageName: [
          { required: true, message: "请输入生成包路径", trigger: "blur" }
        ],
        moduleName: [
          { required: true, message: "请输入生成模块名", trigger: "blur" }
        ],
        businessName: [
          { required: true, message: "请输入生成业务名", trigger: "blur" }
        ],
        functionName: [
          { required: true, message: "请输入生成功能名", trigger: "blur" }
        ],
        parentMenuId: [
          { required: true, message: "请输入菜单路径", trigger: "blur" }
        ],
      }
    }
  },
  watch: {
    'info.subTableName': function (val) {
      this.setSubTableColumns(val)
    },
    'info.tplWebType': function (val) {
      if (val === '') {
        this.info.tplWebType = "element-ui"
      }
    }
  },
  methods: {
    /** 转换菜单数据结构 */
    normalizer (node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.menuId,
        label: node.menuName,
        children: node.children
      }
    },
    /** 选择子表名触发 */
    subSelectChange (value) {
      this.info.subTableFkName = ''
    },
    /** 选择生成模板触发 */
    tplSelectChange (value) {
      if (value !== 'sub') {
        this.info.subTableName = ''
        this.info.subTableFkName = ''
      }
    },
    /** 设置关联外键 */
    setSubTableColumns (value) {
      for (var item in this.tables) {
        const name = this.tables[item].tableName
        if (value === name) {
          this.subColumns = this.tables[item].columns
          break
        }
      }
    }
  }
};
</script>
